<template>
    <div>
      <p class="number">{{score}}</p>
      <p class="detail">做题情况</p>
      <div class="examDetail">
        <div class="exam">题目</div>
        <div class="exam">选择答案</div>
        <div class="exam">正确答案</div>
        <div class="exam">用时</div>
        <div class="exam">题型</div>
      </div>
<!--      <p class="first">1</p>-->
<!--      <p class="first">2</p>-->
<!--      <p class="first">3</p>-->
<!--      <p class="first">4</p>-->
<!--      <p class="first">5</p>-->
<!--      <div-->
<!--        :key="index"-->
<!--        v-for="(item, index) in hisExam.myQuestions"-->
<!--        class="examDetail"-->
<!--        @click="toQuestion(index)"-->
<!--      >-->
<!--        <div class="first">{{index + 1}}</div>-->
<!--        <div class="first">{{hisExam.myQuestions[index].choice}}</div>-->
<!--        <div class="first">{{hisExam.myQuestions[index].ranswer}}</div>-->
<!--        <div class="first">5 min</div>-->
<!--        <div class="first">单选题</div>-->
<!--      </div>-->
      <div>
        <ExamDetailItem
          v-for="(item, index) in hisExam.myQuestions"
          :key="index"
          :index="index"
          :hisExam="hisExam"
        />
      </div>
    </div>
</template>

<script>
  import ExamDetailItem from '@/components/exam_detail_item.vue'
  import { mapState } from 'vuex'

  export default {
    name: 'list',
    data () {
      return {
        index: '0',
        hisExam: {}
      }
    },
    computed: {
      ...mapState(['exam', 'score'])
    },
    mounted () {
      this.hisExam = this.exam
      // console.log(this.score)
      // console.log(this.hisExam)
    },
    methods: {
    },
    components: {ExamDetailItem}
  }
</script>

<style >
  page{
    /*background-image: url("");*/
    /*width: 100%;*/
    /*height: 100%;*/
    /*position: fixed;*/
    /*background-position: initial;*/

    /*backgroundRepeat: no-repeat;*/
    background-image: url("../../../static/images/detail1.png");
    background-size: unset;
    background-position-x: center;
    background-repeat: no-repeat;
    position: fixed;
  }

  .number{
    margin-top: 210rpx;
    font-size: 75rpx;
    line-height: 60rpx;
    color: #949494;
    line-height: 80rpx;
    text-align: center;
  }
  .detail{
    margin-top: 300rpx;
    font-size: 100rpx;
    line-height: 60rpx;
    color: #949494;
    line-height: 80rpx;
    text-align: center;
  }
  .exam{
    width: 150rpx;
    background-color: #2fad62 !important;
    margin-top: 90rpx;
    font-size: 30rpx;
    line-height: 60rpx;
    color: #fffeff;
    line-height: 80rpx;
    text-align: center;
  }
  .examDetail{
    display: flex;
    padding: 10rpx;
    border-bottom: 1rpx solid#eee;
  }
</style>
